/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

/**
 * 被关注回复
 *  */
import React, { useState, useCallback, useEffect } from "react";
import { useSelector, useDispatch } from "dva";
import { Modal, Row, Col, message } from "antd";
import AddInfo from "./components/AddInfo";

const selectPlatform = ({ platform: { platformList: { weixin } = {} } = {} }) => weixin || {};

const SubscribeReply = () => {
  const dispatch = useDispatch();
  const { platform, platformName = "-" } = useSelector(selectPlatform);

  const [content, setContent] = useState(
    `欢迎关注${platformName}！享受${platformName}最快捷的快递自助服务`
  );

  const getContent = useCallback(
    () => {
      if (!platform) {
        message.warn("暂无绑定的微信公众号平台，请先到”微信管理-设置”中新增关联！");
        return;
      }
      dispatch({
        type: "massPush/getSubscribeReply",
        payload: { platform },
      }).then(res => {
        res && setContent(res);
      });
    },
    [dispatch, platform]
  );

  const onSubmit = useCallback(
    (content, { err }) => {
      if (err) {
        return;
      }

      const add = () => {
        dispatch({
          type: "massPush/editSubscribeReply",
          payload: {
            content,
            platform,
          },
        }).then(() => {
          getContent();
        });
      };

      Modal.confirm({
        title: "温馨提示",
        okText: "确定",
        cancelText: "取消",
        onOk: add,
        content: "确定后，用户关注您的公众号，会回复此消息",
      });
    },
    [dispatch, platform, getContent]
  );

  const onTest = useCallback(
    (content, { err }) => {
      if (err) return;
      Modal.confirm({
        title: "温馨提示",
        okText: "确定测试",
        cancelText: "取消",
        onOk: () => {
          dispatch({
            type: "massPush/testKeyWordReply",
            payload: {
              platform,
              content,
            },
          });
        },
        content: (
          <Row>
            <Col>
              您点击【确定测试】，关注定制公众号并绑定此管理平台登录手机号的用户，将接收到此消息，用于检测是否正常推送
            </Col>
            <Col>注：测试前请确保已关注定制公众号，并在公众号内已绑定管理平台登录手机号</Col>
          </Row>
        ),
      });
    },
    [platform, dispatch]
  );

  useEffect(
    () => {
      getContent();
    },
    [getContent]
  );

  return (
    <div>
      <Row type="flex" justify="space-between">
        <Col span={8} push={1}>
          <AddInfo
            value={content}
            onTest={onTest}
            onSubmit={onSubmit}
            contentTitle="被关注回复内容"
          />
        </Col>
        <Col span={8} pull={1}>
          {/* <Input.TextArea rows="10" /> */}
        </Col>
      </Row>
      <Row style={{ marginTop: 10, marginBottom: 10 }} type="flex" justify="space-between">
        <Col style={{ fontWeight: "bolder", fontSize: "16px" }}>
          注：1、新用户关注你的公众号，会自动回复此文本。2，回复内容可展示文字或跳转H5/小程序链接。
        </Col>
      </Row>
    </div>
  );
};

export default SubscribeReply;
